<template>
    <div class="add">
        <nav>
            <a class="nav-zuo" href="#/ment">
                <i class="fa fa-angle-left"></i>
            </a>
            <h3>修改商品</h3>
        </nav>
        <form action="" ref="myform" name="form">
            分类:
            <select name="checked" id="" v-model="datas.checked">
                <option v-for="xin in left" :value=xin>{{xin}}</option>
            </select><br>
            原价: <input class="por" type="text" name="price" v-model="datas.price">
            现价: <input class="por" type="text" name="yuanPrice" v-model="datas.yuanPrice"><br>
            名称: 
            <input class="input" type="text" name="name" v-model="datas.name"><br><br>
            <span class="miao">描述:</span>
            <textarea name="describe" cols="70" rows="3" v-model="datas.describe"></textarea><br><br>
            <button @click.prevent="upadd">确认修改</button>
        </form>
    </div>
</template>
<script>
     import axios from 'axios';
    import { Tabbar, TabbarItem, Group, Cell } from 'vux'
    export default {
        components: {
            Tabbar,
            TabbarItem,
            Group,
            Cell
        },
        data() {
            return {
                left:['食品酒饮','进口好货','个护美妆','家清厨卫','家纺家装'],
                datas:'',
                checked:'',
                price:'',
                yuanPrice:'',
                name:'',
                describe:''
            }
        },
        mounted:function(){
            var that = this;
            let id = this.$route.path.slice(7);
            // console.log(id)
            axios.get(`los/upshop/${id}`).then(function(post){
                // console.log(post);
                that.datas = post.data.message

            }).catch(function(err){
                console.log('获取失败')
            })
        },
        methods:{
            upadd:function(){
                var obj = {};
                console.log('this.$refs.myform');
                console.log(this.$refs.myform);
                let myform = this.$refs.myform;
                let formData = new FormData(myform);
                console.log(formData);
                 var id = this.$route.params.id;
                 console.log(id);
               axios.post('los/upadd/' + id,this.datas)
                .then((resData) =>{
                        console.log('resData-------')
                        console.log(resData)
                        location.href = '#/ment'
                }).catch((err)=>{
                    console.log('cuowu')
                })
            },
        }
    }
</script>
<style scoped>
    img{
        display: inline-block;
        width: 100px;
    }
    .miao{
        position: relative;
        bottom: 52px;
    }
    textarea{
        padding: 5px 10px;
       width: 82%;
       font-size: 18px;
       border: none; 
       box-shadow: 0 0 4px 0px #FA8072;
       border-radius: 10px;
    }
    .por{
        width: 100px;
        border: none; 
       box-shadow: 0 0 4px 0px #FA8072;
         border-radius: 10px;
         padding: 5px 10px;
         font-size: 18px;
    }
    button{
        width: 100%;
        background: #FA8072;
        border:none;
        border-radius: 10px;
        color: #fff;
        line-height: 40px;
        margin-top: 10px;
    }
   .add nav{
        background: #FA8072;
        border-bottom: 1px solid #ccc;
        text-align: center;
        line-height: 45px;
        color: #fff;
   }
   .add nav a{
       position: absolute;
       left: 15px;
       font-size: 28px;
       top: -3px;
       color: #fff;
   }
   .add form{
       padding: 20px;
   }
   input{
       margin: 10px 0;
   }
   .input{
       padding: 5px 10px;
       width: 82%;
       font-size: 18px;
       border: none; 
       box-shadow: 0 0 4px 0px #FA8072;
       border-radius: 10px;
   }
   select{
       padding: 0px 10px;
       width: 80%;
       font-size: 14px;
       margin: 10px 0;
       border: none; 
       box-shadow: 0 0 4px 0px #FA8072;
       border-radius: 2px;
       appearance:none;
   }
   option{
       border: none; 
       box-shadow: 0 0 1px 0px #FA8072;
       padding: 3px;
   }
  
    
</style>